.form-control {
  @apply -bg-canvas -block -h-8 -py-1 -px-2 -w-full -ring-[--form-control-border] -ring-1 -rounded-[--form-control-radius] -outline -outline-1 -outline-transparent -transition-[outline,box-shadow];
}

.form-control.focus,
.form-control:focus {
  @apply -outline-[--form-control-focus] -ring -ring-focus -ring-opacity-30;
}

.form-control[disabled],
.form-control.disabled {
  @apply -bg-[--form-control-disabled] -opacity-100;
}
.form-control[readonly],
.form-control.readonly {
  @apply -bg-[--form-control-readonly];
}
